<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="common">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    新增优惠券
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="myForm">
                    <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">优惠名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="tickName" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">优惠力度</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="tickNum">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">优惠类型</label>
                        <div class="col-sm-10">
<!--                            <input type="text" class="form-control" name="tickNumType">-->
                            <select name="tickNumType">
                                <option value="1">折</option>
                                <option value="2">块</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">开始时间</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" name="startTime">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">过期时间</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" name="endTime">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">总票数</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="totalCount">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">剩余票数</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="remainCount">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                        <button type="button" id="btn_submit" onclick="addForm()" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<button class="btn btn-primary" id="add" type="button">添加</button>
<table id="discountInfoTable"></table>

</body>
<script>
    $(function (){
        queryDiscountlist();
    })
    function  queryDiscountlist(){
        $("#discountInfoTable").bootstrapTable({
            url:"../discount/queryUserDiscount", //user是映射的类，queryUserInfo,是映射的方法
            columns:[
                {checkbox: true,visible: true },//是否显示复选框
                {field:'tickId',title:'id',sortable:true},
                {field:'tickName',title:'优惠名称',sortable:true},
                {field:'tickNum',title:'优惠力度',sortable:true},
                {field:'tickNumType',title:'优惠类型',sortable:true,
                    formatter: function(value,row,index){
                        if (row.tickNumType == 1){
                            return "折";
                        } else {
                            return "块";
                        }
                    }
                },
                {field:'startTime',title:'开始时间',sortable:true,},
                {field:'endTime',title:'过期时间',sortable:true,},
                {field:'createTime',title:'创建时间',sortable:true,},
                {field:'totalCount',title:'总票数',sortable:true,},
                {field:'remainCount',title:'剩余票数',sortable:true,},
                {field:'tickType',title:'用户或商家优惠券',sortable:true,},
                {field:'cz',title:'操作',sortable:true,sortable:true},

            ],
            //开启分页以后，默认会传入两个参数,而这两个参数，直接是mysql的分页计算后的数据
            pagination:true,
            pageSize:2,
            pageList:[2,4,6,8,10],
            sidePagination : 'client',//server:服务器端分页{rows:[],total:10}|client：前端分页 [{},{}]
        })}




    $(function(){
        $("#add").click(function(){
            $("#myModal").modal({
                keyboard:false
            });
        });
    })

    function addForm(){
        $.ajax({
            url:"../discount/addDiscount",
            data:$("#myForm").serialize(),
            success:function(data){
                $('#myModal').modal('hide');
                $("#myTable").bootstrapTable('refresh');//成功后刷新表格
            }
        });
    }
</script>
</html>